<script>
import { onMounted, reactive, toRefs } from "vue";
import { Toast, Dialog } from "vant";
import { useRoute, useRouter } from "vue-router";
import SendContent from "@/components/SendContent.vue";
import { getMeixi, getNBA } from "../assets/api/detail_video.js";
export default {
  components: { SendContent },
  setup() {
    let router = useRouter();
    let route = useRoute();
    // console.log(route.query.id);
    const lists = reactive({
      nownum: 0, //余额
      bean: 0, //余额
      barrage: true, //弹幕图标切换
      play: false, //播放图标切换
      tabId: false, //视频上下显示隐藏
      weight: 0, // 轮播区域的高度
      tabsid: 1, //tabs选项卡
      arr: [], //弹幕内容
      // 弹幕参数
      isPause: false,
      isJs: false,
      direction: "default",

      sendContent: null, //评论

      // 任务数据
      hostshare: 0,
      say: 0,
      watch: 0,

      tabs: [
        {
          id: 1,
          name: "聊天",
        },
        {
          id: 2,
          name: "主播",
        },
        {
          id: 3,
          name: "排行榜",
        },
      ],
      plarr: [], // 评论数组
      show: false, //礼物隐藏
      // 礼物数组
      giftlist: [
        {
          id: 200,
          img: "https://img.588ku.com/gif/20/09/01/88b7b3f5c46ad39d367b0b5a4ca030f7.gif!qk277",
          name: "666",
          num: "880",
        },
        {
          id: 201,
          img: "https://img.588ku.com/gif/21/06/17/f228a1a0ac9e3678f8048ec99ae8284a.gif!qk277",
          name: "星星",
          num: "880",
        },
        {
          id: 202,
          img: "https://img.588ku.com/gif/20/12/01/1653b430189885d7345b8878bb8ed410.gif!qk277",
          name: "火箭",
          num: "880",
        },
        {
          id: 203,
          img: "https://img.588ku.com/gif/21/05/13/add8914e175b3a7dbc6bec93eee17be5.gif!qk277",
          name: "小熊",
          num: "880",
        },
        {
          id: 204,
          img: "https://img.588ku.com/gif/20/08/31/98ea4f063ba9092cab3c36f408a8bc91.gif!qk277",
          name: "烟花",
          num: "880",
        },
        {
          id: 205,
          img: "https://img.588ku.com/gif/21/06/17/8deb06ce9931177feb69649cd96d3df5.gif!qk277",
          name: "皇冠",
          num: "880",
        },
        {
          id: 206,
          img: "https://img.588ku.com/gif/20/08/20/0440706646f4e99cf2c60100237aeb42.gif!qk277",
          name: "奖杯",
          num: "880",
        },
        {
          id: 207,
          img: "https://img.588ku.com/gif/20/08/31/ecffecf33993c3455b1a34570c3d523f.gif!qk277",
          name: "干杯",
          num: "880",
        },
      ], //礼物数组
      hotlist: [], //直播数组
      monId: 200, //礼物id
      itemimg: "", //礼物图片
      nums: 1, //礼物数量
      num: 0, //重置赠送礼物数量
      liveid: null, //接收router id
      live: "", //关注对应下标数组
      playurl: "",
      likenum: "", //关注量
      atten: true, //关注
      addattens: [], //添加关注
      showShare: false, // 分享
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
      ],
      plName: "", // 评论的名字
      plIndex: 0, // 获取评论下标
      shows: false, //评论show
      plValue: "", // 评论内容
      like: false, //点赞
      chat_show_img2: "",
      video: true,
      Video_live: [], //直播详情
      video_data: null, 
      share: false,
      daily: false,
    });
    let video_list = [];
    
    //路由跳转
    let hostinfo = () => {
      window.localStorage.setItem("userList", JSON.stringify(lists.Video_live));
      router.push({
        path: "/detailshost",
      });
    };
    // 分享
    const onSelect = () => {
      lists.showShare = false;
      if (lists.hostshare < 10) {
        lists.hostshare += 1;
        lists.bean += 20;
        window.localStorage.setItem("bean", lists.bean);
        window.localStorage.setItem("hostshare", lists.hostshare);
      } else {
        lists.hostshare = 10;
        lists.share = true;
        window.localStorage.setItem("share", lists.share);
      }
      Toast("分享成功");
    };
    // 礼物赠送
    const Dialogs = () => {
      Dialog.confirm({
        title: "提醒",
        message: "确认赠送吗？",
      })
        .then(() => {
          // 判断登录
          if (!window.localStorage.getItem("token")) {
            Toast("未登录，前往登录页面");
            router.push("/loginpsw");
          } else if (lists.nownum < 880) {
            Toast("余额不足，前往充值中心");
            router.push("/mybuy");
          } else if (lists.nums == 1) {
            lists.num++;
            lists.plarr.push({
              name: "Mercurio送出了",
              text: "x" + lists.num,
              img: lists.itemImg,
            });
            // console.log(lists.itemImg);
            Toast("赠送成功");
            lists.nownum -= 880;
            lists.show = false;
            window.localStorage.setItem("money", lists.nownum);
            if (lists.watch < 1) {
              lists.watch += 1;
              lists.bean += 100;
              window.localStorage.setItem("bean", lists.bean);
              window.localStorage.setItem("watch", lists.watch);
            } else {
              lists.watch = 1;
            }
          } else {
            lists.num = lists.nums;
            lists.plarr.push({
              name: "Mercurio送出了",
              text: "x" + lists.num,
              img: lists.itemImg,
            });
            // console.log(lists.num);
            Toast("赠送成功");
            if (lists.watch < 1) {
              lists.watch += 1;
              lists.bean += 100;
              window.localStorage.setItem("bean", lists.bean);
              window.localStorage.setItem("watch", lists.watch);
            } else {
              lists.watch = 1;
            }
            lists.nownum -= 880 * lists.num;
            lists.show = false;
            window.localStorage.setItem("money", lists.nownum);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    };
    // 头部tab选项 获取id
    const tabid = (id) => {
      lists.tabsid = id;
      //console.log(lists.classTabid);
    };
    // 播放暂停
    const suspend = () => {
      var vide = document.getElementById("example_video");
      if (vide.paused) {
        vide.play();
        lists.play = false;
      } else if (vide.play()) {
        vide.pause();
        lists.play = true;
      }
    };

    // 弹幕开启暂停切换
    const barrageChange = () => {
      lists.barrage = !lists.barrage;
      if (!lists.barrage) {
        document
          .querySelector(".barrage-wrapper")
          .setAttribute("style", "z-index:-1;");
      } else {
        document
          .querySelector(".barrage-wrapper")
          .setAttribute("style", "z-index:1;");
      }
    };
    // 初始化模拟弹幕数据
    const initTestData = () => {
      let arr = [
        " 出了个攻速鞋哈哈哈哈",
        " 有🐠",
        " 真 攻速鞋",
        " 跨3a每天都有蒸汽朋克鞋说鞋不触发的",
        " 这就是钞能力吗",
        " 这号相当欧啊",
        " 狂战士带胜负之役太刀好吗",
        " 燃烧了能算多欧咯",
        " 划水才能出货，安图恩版本的真理",
        " 有🐠有🐠",
      ];
      let name = [
        "春漫山野",
        "弧人王",
        "陪伴",
        "L",
        "【清风可相许】",
        "冷",
        "边牧还是金毛",
        "心塞丶",
        "三石没有石ss",
        "Acolasia丶",
      ];
      for (let i = 0; i < 1; i++) {
        for (let index = 0; index < 10; index++) {
          lists.arr.push({
            direction: "default",
            content: arr[parseInt(Math.random() * arr.length)],
          });
          lists.plarr.push({
            name: name[parseInt(Math.random() * name.length)],
            text: arr[parseInt(Math.random() * arr.length)],
          });
        }
      }
    };

    // 发送弹幕
    const sendBarrage = () => {
      lists.plarr.push({
        name: "Mercurio",
        text: lists.sendContent,
      });
      // console.log(lists.arr);
      if (
        lists.arr.length > 1 &&
        lists.sendContent != "" &&
        lists.sendContent != null
      ) {
        lists.arr.unshift({
          content: lists.sendContent,
          direction: lists.direction,
          isSelf: true,
          style: {
            color: "#fff",
            fontSize: "15px",
          },
          isJs: lists.isJs,
        });
      } else {
        lists.arr.push({
          content: lists.sendContent,
          direction: lists.direction,
          isSelf: true,
          style: {
            color: "#fff",
          },
          isJs: lists.isJs,
        });
      }
      lists.sendContent = null;
      if (lists.say < 10) {
        lists.say += 1;
        lists.bean += 10;
        window.localStorage.setItem("bean", lists.bean);
        window.localStorage.setItem("say", lists.say);
      } else {
        lists.say = 10;
        lists.daily = true;
        window.localStorage.setItem("daily", lists.daily);
      }
    };
    //点击屏幕隐藏
    const tab = () => {
      lists.tabId = !lists.tabId;
    };
    //礼物出现
    const showPopup = () => {
      lists.show = true;
    };
    // 礼物点击
    const girtImg = (item) => {
      lists.monId = item.id;
      // console.log(lists.monId);
      // console.log(item.id);
      if (lists.itemImg != item.img) {
        lists.num = 0;
      } else {
        return lists.num;
      }
      lists.itemImg = item.img;
      lists.chat_show_img2 = item.img;
      setTimeout(() => {
        lists.chat_show_img2 = "";
      }, 3500);
      // console.log(lists.itemImg);
    };
    // 礼物数量
    const editnum = () => {
      if (lists.nums >= 99) {
        Toast("最高数量为99");
        lists.nums = 99;
      } else if (lists.nums <= 1 && lists.nums == " ") {
        Toast("最低数量为1");
        lists.nums = 1;
      } else {
        return lists.nums;
      }
    };
    // 关注
    const addatten = () => {
      // 判断是否登录
      if (!window.localStorage.getItem("token")) {
        Toast("未登录，前往登录页面");
        router.push({ path: "/loginpsw" });
      } else {
        // console.log(111);
        // lists.atten = !lists.atten;

        if (lists.atten) {
          lists.atten = false;
          // console.log(lists.live);
          let follow = JSON.parse(window.localStorage.getItem("article_live"));
          // console.log(JSON.parse(window.localStorage.getItem("article_live")));
          // console.log(JSON.parse(window.localStorage.getItem("regard")));
          let regard = JSON.parse(window.localStorage.getItem("regard"));
          // regard.push({
          //   matchId: follow.matchId,
          //   anchorAvatar: follow.anchorAvatar,
          //   anchorName: follow.anchorName,
          //   roomName: follow.roomName,
          // });
          // console.log(follow);
          regard.push(follow);
          // console.log(regard);
          // window.localStorage.setItem("follow_data") = JSON.stringify(follow_data);
          window.localStorage.regard = JSON.stringify(regard);
          window.localStorage.follow_data = lists.addattens.push({
            id: lists.live.id,
            text: lists.live.text,
            userimg: lists.live.userimg,
            title: lists.live.title,
          });
          window.localStorage.setItem(
            "addattens",
            JSON.stringify(lists.addattens)
          );
        } else {
          lists.atten = true;
          let id = JSON.parse(
            window.localStorage.getItem("article_live")
          ).matchId;
          console.log(id);
          let regard_two = JSON.parse(window.localStorage.getItem("regard"));
          let index = regard_two.findIndex((item) => item.matchId == id);
          regard_two.splice(index, 1);
          window.localStorage.regard = JSON.stringify(regard_two);
          lists.addattens = lists.addattens.filter((item) => {
            return item.id != lists.live.id;
          });
          window.localStorage.setItem(
            "addattens",
            JSON.stringify(lists.addattens)
          );
        }
      }
    };
    // 过滤器
    function filters(id) {
      let w = id > 10000 ? (id / 10000).toFixed(1) + "万" : id;
      return w;
    }
    onMounted(() => {
      //显示是否关注
      let id = JSON.parse(window.localStorage.getItem("article_live")).matchId;
      let regard_two = JSON.parse(window.localStorage.getItem("regard"));
      let index = regard_two.findIndex((item) => item.matchId == id);
      if (index == -1) {
        lists.atten = true;
      } else {
        lists.atten = false;
      }
      lists.nownum = Number(window.localStorage.getItem("money"));
      lists.bean = Number(window.localStorage.getItem("bean"));
      lists.hostshare = Number(window.localStorage.getItem("hostshare"));
      lists.share = window.localStorage.getItem("share");
      lists.daily = window.localStorage.getItem("daily");
      lists.watch = Number(window.localStorage.getItem("watch"));
      lists.say = Number(window.localStorage.getItem("say"));

      initTestData();
      (lists.Video_live = JSON.parse(
        window.localStorage.getItem("article_live")
      )),
        document
          .querySelector("body")
          .setAttribute("style", "background-color:#FFF;");
      getMeixi({
        vid: "12427073267542006673",
        title: "壮观极了！阿根廷生死战后，梅西带全队与上万球迷高唱胜利歌曲",
        pd: "h5",
        act: "h5Rec",
      }).then((data) => {
        data.data.response.videos.forEach((item) => {
          video_list.push({
            id: Date.now(),
            play_url: item.play_url,
          });
        });
        getNBA({
          vid: "11323787393205204075",
          title: "你可以说我独，但不能说我菜「尼克杨SwaggyP超燃混剪」",
          pd: "h5",
          act: "h5Rec",
        }).then((data) => {
          // console.log(data.data.response.videos);
          data.data.response.videos.forEach((item) => {
            // console.log(item);
            if (video_list.length >= 14) {
              video_list.push({
                id: Date.now(),
                play_url: item.play_url,
              });
            }
          });
        });
        setTimeout(() => {
          let index = route.query.id;
          // console.log(index);
          lists.video_data = video_list[index].play_url;
          // console.log(video_list, video_list.length);
          lists.video = false;
        }, 1000);

        // console.log(data.data.response.videos);
        // console.log(video_list);
      });
    });
    return {
      ...toRefs(lists),
      showPopup,
      tab,
      initTestData,
      barrageChange,
      suspend,
      editnum,
      girtImg,
      sendBarrage,
      tabid,
      addatten,
      Dialogs,
      onSelect,
      filters,
      hostinfo,
      video_list,
    };
  },
};
</script>

<template>
  <div class="container live">
    <van-sticky>
      <top-com></top-com>
    </van-sticky>

    <!-- 视频 -->
    <div class="fix">
      <div class="video-box" @click="tab">
        <div class="video-bf">
          <meta name="referrer" content="no-referrer" />
          <video
            id="example_video"
            :src="video_data"
            width="100%"
            height="100%"
            autoplay
          ></video>
          <van-loading type="spinner" v-show="video" />
          <send-content :arr="arr" :isPause="isPause" :percent="50">
          </send-content>
        </div>
        <div class="title" v-show="tabId == true">
          <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i
          ><span>{{ Video_live.roomName }}</span>
        </div>
        <div class="bottom" v-show="tabId == true">
          <div class="left">
            <i class="iconfont icon-huo"></i
            ><span>{{ filters(Video_live.hotNum) }}</span>
          </div>
          <div class="right">
            <div class="clarity">高清</div>
            <div @click.stop="barrageChange">
              <i class="iconfont icon-danmukaiqi" v-show="barrage"></i>
              <i class="iconfont icon-danmuguanbi" v-show="!barrage"></i>
            </div>

            <div class="play" @click.stop="suspend">
              <i
                class="iconfont icon-shipinbofangshibofang"
                v-show="play == true"
              ></i
              ><i class="iconfont icon-iconstop" v-show="play == false"></i>
            </div>
            <i class="iconfont icon-quanping"></i>
          </div>
        </div>
      </div>
      <div class="nav">
        <div class="tabs">
          <ul>
            <li
              v-for="item in tabs"
              :key="item.id"
              @click="tabid(item.id)"
              :class="{ active: tabsid == item.id }"
            >
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <div class="right" v-show="atten == true" @click="addatten">
          <i class="iconfont icon-jiahao"></i>
          <div class="atten">
            <span>关注</span><span class="num">123人</span>
          </div>
        </div>
        <div class="right cancel" v-show="atten == false" @click="addatten">
          <div class="atten"><span>取消关注</span><span>124</span></div>
        </div>
      </div>
    </div>

    <div class="chat" v-show="tabsid == 1">
      <div class="fixs">
        <div class="notice">
          <div class="tips">
            <i class="iconfont icon-bofang"></i><span>系统通知:</span>
          </div>
          <div class="content">
            <div class="text">
              <van-notice-bar
                scrollable
                text="领取限量球衣和惊喜礼品！2022卡塔尔世界杯倒计时，喜欢主播的点点关注，不迷路，让我们一起欢聚白鲨，纵享世界杯，领取限量球衣和惊喜礼品！。"
              />
            </div>
          </div>
          <!-- <van-notice-bar
              left-icon="volume-o"
              text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
            /> -->
        </div>
        <div class="system-prompt">
          <p>
            系统提示:平台24小时巡查，禁止传播违法违规、低俗色情等不良信息，请勿轻信各类广告信息，如主播诱导私下交易，请谨慎判断，以免上当受骗。
          </p>
        </div>
      </div>
      <!-- 聊天 -->
      <div class="comment">
        <ul class="item">
          <li v-for="(item, index) in plarr" :key="index">
            <span class="name"
              >{{ item.name }} :
              <img v-if="item.img" :src="item.img" alt="" />
              <span class="text">{{ item.text }}</span>
            </span>
          </li>
        </ul>
      </div>

      <!-- 评论 -->
      <div class="comments">
        <div class="sendhead">
          <div>
            <input
              v-model="sendContent"
              type="text"
              placeholder="期待您的神评论"
              @keyup.enter="sendBarrage"
            />
          </div>
          <div class="send" @click="sendBarrage">发送</div>
        </div>
        <i class="iconfont icon-gift" @click="showPopup"></i>
      </div>

      <!-- 礼物 -->
      <van-popup
        v-model:show="show"
        round
        closeable
        position="bottom"
        :style="{ height: '58%' }"
        :overlay="false"
      >
        <div class="gift">
          <van-tabs>
            <van-tab title="礼物">
              <div class="giftbox">
                <div
                  class="item"
                  v-for="item in giftlist"
                  :key="item.id"
                  @click.stop="girtImg(item)"
                >
                  <div class="img" :class="{ active: monId == item.id }">
                    <img :src="item.img" alt="" />
                  </div>
                  <p class="name">{{ item.name }}</p>
                  <p class="num">{{ item.num }}&nbsp;鲨粮</p>
                </div>
              </div>
              <div class="bottom">
                <div class="balance">
                  <div class="img">
                    <img src="../assets/img/eat.png" alt="" />
                  </div>
                  <div class="eatnum">{{ nownum }}</div>
                </div>
                <div class="balance">
                  <div class="img">
                    <img src="../assets/img/eats.png" alt="" />
                  </div>
                  <div class="eatsnum">{{bean}}</div>
                </div>
                <router-link to="/mybuy" class="buy">充值</router-link>
                <!-- <div class="give">赠送</div> -->
                <div class="btn-box">
                  <input
                    class="btn-num"
                    v-model="nums"
                    @click.stop=""
                    @keyup.stop="editnum"
                  />
                  <div class="give" @click.stop="Dialogs">赠送</div>
                </div>
              </div>
            </van-tab>
            <van-tab title="背包">
              <div class="bag">
                <img
                  src="https://h5.bjhcek.cn/static/img/pic_nothing.e6dde59.png"
                  alt=""
                />
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </van-popup>
    </div>

    <!-- 主播 -->
    <div class="host" v-show="tabsid == 2">
      <div class="info">
        <div @click="hostinfo" class="img">
          <img :src="Video_live.anchorAvatar" alt="" />
        </div>
        <div class="right">
          <div class="title one-txt-cut">
            {{ Video_live.title }}
          </div>
          <p class="name">{{ Video_live.anchorName }}</p>
          <p class="roomnum">房间号:{{ Video_live.roomId }}</p>
        </div>
        <div class="line"></div>
        <div class="share">
          <van-share-sheet
            v-model:show="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
            :overlay="false"
          />
          <i class="iconfont icon-fenxiang_2"></i
          ><span @click="showShare = true">分享</span>
        </div>
      </div>
      <div class="notice">
        <h3>主播公告</h3>
        <p>
          2022卡塔尔世界杯倒计时，喜欢主播的就点关注，不迷路，让我们一起欢聚白鲨，纵享世界杯，领取限量球衣和惊喜礼品
        </p>
      </div>
      <!-- <div class="dynamic">
        <h3>主播动态</h3>
        <div class="trends">
          <div
            class="trends-box"
            v-for="(item, index) in live.texts"
            :key="item.id"
          >
            <div class="head">
              <img :src="userimg" alt="" />
              <div class="title">
                <div class="name">{{ username }}</div>
                <div class="time">{{ item.time }}</div>
              </div>
            </div>
            <div class="content">{{ item.content }}</div>
            <div class="reply-box">
              <ul class="reply">
                <li
                  is-link
                  @click="showPopupss(i, index)"
                  v-for="i in live.texts[index].replay"
                  :key="i.id"
                >
                  <div class="name">{{ i.name }} :</div>
                  <div class="talk">{{ i.content }}</div>
                </li>
              </ul>
            </div>
            <div class="footer-icon">
              <div class="zan" @click="addLike(item, index)">
                <i v-show="!item.like" class="icon-31guanzhu1 iconfont"></i>

                <i
                  v-show="item.like"
                  class="icon-31guanzhu1xuanzhong iconfont"
                  style="color: red"
                ></i
                >赞
              </div>
              <div class="pl" @click="showPopups(item, index)">
                <i class="icon-comment_light iconfont"></i>
                评论
              </div>
            </div>
          </div>
        </div>
        <van-popup v-model="shows" position="bottom" :style="{ height: '12%' }">
          <div class="reply-inp">
            <div class="head">想对 {{ username }} 说什么</div>
            <div class="inp">
              <input type="text" placeholder="我来评论" v-model="plValue" />
              <div class="btn" @click="plEnter">发表</div>
            </div>
          </div>
        </van-popup>
      </div> -->
    </div>

    <!-- 礼物显示 -->
    <div class="img_show" v-if="chat_show_img2">
      <img :src="chat_show_img2" alt="" />
    </div>
    <div class="ranking" v-show="tabsid == 3">
      <div class="title">周贡排行</div>
      <p>按最近7天观众打赏排行</p>
      <ul class="ranklist">
        <li>
          <i class="iconfont icon-level1"></i>
          <span class="name">是绵绵呀</span>
          <span class="num">142,400</span>
        </li>
        <li>
          <i class="iconfont icon-level2"></i>
          <span class="name">我是一只小白鲨</span>
          <span class="num">99,000</span>
        </li>
        <li>
          <i class="iconfont icon-level3"></i>
          <span class="name">孤独与酒狼人与狗</span>
          <span class="num">66,000</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.live {
  /* 直播界面 */
  .fix {
    position: fixed;
    top: 49px;
    .video-box {
      position: relative;
      height: 211px;
      background: #000;
      video {
        width: 375px;
        height: 211px;
      }
      .title {
        display: flex;
        align-items: center;
        color: white;
        width: 100%;
        position: absolute;
        top: 0;
        padding: 10px 10px 20px 10px;
        font-size: 16px;
        z-index: 14;
        overflow: hidden;
        text-overflow: ellipsis;
        background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0, #000 100%);
        word-break: break-all;
        .iconfont {
          font-size: 20px;
          margin-top: 2px;
        }
      }
      .bottom {
        width: 100%;
        height: 40px;
        position: absolute;
        bottom: 0px;
        left: 0;
        z-index: 12;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0,
          #000 100%
        ) !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 15px;
        color: #fff;
        font-size: 13px;
        .left {
          font-size: 16px;
          .iconfont {
            font-size: 17px;
            margin-right: 5px;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .clarity {
            border: 1px solid #ffffff;
            height: 19px;
            padding: 0 9px;
            line-height: 17px;
            border-radius: 9px;
            color: #ffffff;
            margin-right: 5px;
          }

          .iconfont {
            font-size: 20px;
            margin-left: 15px;
          }
          .icon-danmukaiqi {
            font-size: 24px;
          }
          .icon-danmuguanbi {
            font-size: 24px;
          }
        }
      }
    }
  }
  .nav {
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    .tabs {
      background-color: #fff;
      overflow-y: hidden;
      overflow-x: auto;
      display: flex;
      &::-webkit-scrollbar {
        display: none;
      }
      ul {
        height: 50px;
        padding-top: 4px;
        line-height: 50px;
        position: relative;
        white-space: nowrap;
        display: flex;
        position: relative;

        li {
          position: relative;
          span {
            color: #3f3f3f;
            font-size: 16px;
            margin: 0 18px;
            font-weight: 700;
          }
          &.active {
            //  font-size: 20px;
            font-weight: 700;
            span {
              color: #a9145a;
            }
            &::before {
              content: "";
              position: absolute;
              top: auto;
              left: 26%;
              bottom: 0px;
              right: auto;
              height: 3px;
              width: 48%;
              background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
              border-radius: 2px;
            }
          }
        }
      }
    }
    .right {
      width: 90px;
      height: 50px;
      display: flex;
      color: white;
      background: #a9145a;
      padding: 0 13px;
      align-items: center;
      justify-content: space-around;

      .iconfont {
        font-size: 20px;
        // margin-right: 2px;
      }
      .atten {
        text-align: center;
        font-size: 14px;
        font-weight: 400;

        .num {
          font-size: 12px;
        }
      }
    }
    .cancel {
      background-color: #ccc;
    }
  }
  .chat {
    // position: relative;
    .fixs {
      position: fixed;
      top: 310px;
      width: 100%;
      .notice {
        display: flex;
        align-items: center;
        width: 100%;
        height: 32px;
        background-color: #ffeddc;
        font-size: 14px;
        font-weight: 700;
        color: #ed6a0c;
        overflow: hidden;
        position: relative;
        //   border: 1px solid #000;
        //   flex-wrap: nowrap;
        .tips {
          position: absolute;
          padding-left: 10px;
          z-index: 100;
          // width: 100%;
          display: flex;
          align-items: center;
          margin-right: 6px;
          background-color: #fffbe8;
          .iconfont {
            margin-right: 4px;
            font-size: 20px;
          }
          span {
            width: 61px;
          }
        }
        .content {
          flex: 1;
          // padding-right: 10px;
          // border: 1px solid #000;
          .text {
            span {
              font-size: 15px;
              display: block;
              width: 1200px;
            }
          }
        }
      }
      .system-prompt {
        p {
          // padding: 0px 10px;
          font-size: 14px;
          color: #acacac;
          padding: 5px 15px 5px 15px;
          background: #fff;
        }
      }
    }

    .comments {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      height: 60px;
      background-color: #fff;
      max-width: 750px;
      min-width: 375px;
      .sendhead {
        flex: 1;
        margin-left: 15px;
        margin-right: 15px;
        background-color: #f4f4f4;
        border-radius: 20px;
        height: 35px;
        border: 1px solid #cccccc;
        display: flex;
        justify-content: space-between;
        input {
          // width: 100%;
          padding-right: 10px;
          padding-left: 14px;
          height: 33px;
          line-height: 33px;
        }
        .send {
          height: 35px;
          border-radius: 0 20px 20px 0;
          width: 50px;
          display: flex;
          margin-top: -1px;
          margin-right: -1px;
          justify-content: center;
          align-items: center;
          background: #a9145a;
          color: white;
        }
      }
      i {
        font-size: 28px;
        width: 30px;
        height: 30px;
        color: #a9145a;
        margin-right: 15px;
      }
    }
    // 弹幕
    .comment {
      padding: 366px 15px 65px;
      overflow: hidden;
      // margin: 0 0 70px;
      background-color: #fff;
      .item {
        li {
          margin-bottom: 4px;
          display: flex;
          align-items: center;
          .name {
            line-height: 30px;
            color: rgb(71, 101, 176);
            font-size: 14px;
            .text {
              font-size: 14px;
              color: #434343;
              padding-left: 4px;
              word-break: break-all;
            }
            img {
              display: inline-block;
              width: 50px;
              // height: 50px;
              vertical-align: middle;
            }
          }
        }
      }
    }
    // 礼物
    .gift {
      padding-top: 20px;
      .giftbox {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        .item {
          font-size: 14px;
          color: #3b3b3c;
          margin-left: 12px;
          margin-top: 8px;
          width: 21%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .img {
            height: 76px;
            width: 76px;
            border: 2px solid #eeeeee;
            &.active {
              border: 2px solid #d51c78;
            }

            img {
              width: 100%;
            }
          }
          .name {
            margin: 5px 0 2px;
          }
          .num {
            color: #949494;
          }
        }
      }
      .bottom {
        border-top: 2px solid #eeeeee;
        margin-top: 8px;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .balance {
          display: flex;
          align-items: center;
          img {
            margin-right: 2px;
          }
          .text {
            margin-right: 4px;
          }
          .eatnum {
            margin-top: 4px;
          }
          .eatsnum {
            margin-top: 4px;
          }
        }
        .buy {
          color: #a9145a;
          border: 1px solid #a9145a;
          border-radius: 5px;
          padding: 4px 6px;
          font-weight: bold;
        }
        .btn-box {
          display: flex;
          height: 30px;
          line-height: 30px;
          border: 1px solid #a9145a;
          border-radius: 5px;
          input {
            width: 50px;
            text-align: center;
            // padding-left: 10px;
          }
          .give {
            font-size: 14px;
            width: 50px;
            margin-top: -1px;
            color: #fff;
            text-align: center;
            background-color: #a9145a;
            border-top-right-radius: 5px;
            // border-bottom-right-radius: 5px;
          }
        }
      }
      .bag {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        img {
          width: 180px;
          margin-top: 65px;
        }
      }
    }
  }
  .host {
    margin-top: 263px;
    background-color: #f4f4f4;
    .info {
      background-color: #fff;
      box-shadow: -10px -2px 20px 0px #f5f5f5;
      // height: 100%;
      display: flex;
      align-items: center;
      padding: 25px 14px;
      .img {
        width: 55px;
        height: 55px;
        margin-right: 15px;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      .right {
        width: 50%;
        flex: 1;
        .title {
          color: #333;
          font-size: 16px;
          font-weight: bold;
          // width: 50%;
        }
        p {
          color: #666;
          font-size: 13px;
          white-space: nowrap;
          // margin-bottom: 3px;
          margin-top: 5px;
        }
      }
      .line {
        display: inline-block;
        height: 55px;
        // height: 100%;
        width: 1px;
        background-color: #756df6;
        margin: 0 13px;
      }
      .share {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px 6px;
        .iconfont {
          font-size: 22px;
          color: #756df6;
          margin-bottom: 4px;
        }
      }
    }
    .notice {
      margin: 10px 0;
      padding: 15px;
      background-color: #fff;
      // border-radius: 8px;
      h3 {
        padding: 10px 0;
        color: #333;
        font-size: 16px;
        font-weight: bold;
      }
      p {
        color: #9d9fa0;
        font-size: 14px;
      }
    }
    .dynamic {
      margin-top: 10px 0;

      h3 {
        padding-top: 20px;
        padding-left: 15px;
        color: #333;
        font-size: 16px;
        font-weight: bold;
        background-color: #fff;
      }
      .trends-box {
        background: #fff;
        // border-radius: 8px;
        padding: 15px;
        border-bottom: 2px solid #f4f4f4;
        // margin-bottom: 10px;
        .head {
          display: flex;
          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }
          .title {
            margin-left: 10px;

            .name {
              font-size: 12px;
              color: #181818;
            }
            .time {
              font-size: 10px;
              color: #b3b3b3;
            }
          }
        }
        .content {
          font-size: 14px;
          color: #3c3c3c;
          margin: 15px 0;
        }
        .reply-box {
          background: #f8f8f8;
          margin-bottom: 10px;
          border-radius: 10px;
          .reply {
            li {
              line-height: 25px;
              height: 25px;
              margin: 0 5px;
              padding: 0 8px;
              border-radius: 8px;
              display: flex;
              .head {
                margin-left: 100px;
                font-size: 12px;
                color: #999;
                .iconfont {
                  font-size: 10px;
                  margin-left: 4px;
                }
              }
              .name {
                color: #234477;
                font-size: 12px;
              }
              .talk {
                color: #b5b5b5;
                font-size: 12px;
              }
            }
          }
        }

        .footer-icon {
          display: flex;
          .iconfont {
            font-size: 18px;
            vertical-align: -2px;
          }
          .pl {
            height: 18px;
            line-height: 16px;
            font-size: 10px;
            color: #999;
          }
          .zan {
            margin-right: 20px;
            line-height: 16px;
            height: 18px;
            font-size: 10px;
            color: #999;
          }
        }
      }
      // 回复弹窗
      .reply-inp {
        margin: 10px 20px;
        .head {
          color: #c3c3c3;
          font-size: 12px;
        }
        .inp {
          display: flex;
          margin: 11px 0 0;
          align-items: flex-end;
          justify-content: space-between;
          input {
            width: 262px;
            height: 30px;
            line-height: 30px;
            border-radius: 6px;
            font-size: 14px;
            padding: 0 10px;
            color: #757575;
            background: #f2f2f4;
            outline: none;
            border: none;
          }
          .btn {
            width: 56px;
            font-size: 12px;
            border-radius: 6px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
          }
        }
      }
    }
  }
  .ranking {
    margin-top: 261px;
    // background-color: #fff;
    .title {
      color: rgb(112, 23, 188);
      font-weight: 700;
      font-size: 18px;
      text-align: center;
      background-color: rgb(240, 232, 249);
      padding: 5px;
    }
    p {
      color: rgb(136, 136, 136);
      text-align: center;
      background-color: #f6f6f6;
      width: 70%;
      border-radius: 15px;
      // margin: auto;
      padding: 3px 0px;
      font-size: 13px;
      margin: 3px auto;
    }
    ul {
      margin-top: 10px;
      li {
        padding: 8px 15px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        &:nth-child(1) {
          .iconfont {
            color: #f6b82a;
          }
        }
        &:nth-child(2) {
          .iconfont {
            color: #cbcbcb;
          }
        }
        &:nth-child(3) {
          .iconfont {
            color: #d4ac91;
          }
        }
        .name {
          flex: 1;
        }
        .num {
          padding-top: 3px;
        }
        .iconfont {
          margin-right: 8px;
        }
      }
    }
  }
}
::v-deep .van-popup {
  box-shadow: 0px 1px 1px 2px #ccc;
}

::v-deep .van-share-sheet__options {
  justify-content: center;
}

//礼物显示
.img_show {
  position: fixed;
  top: 50%;
  left: 25%;
  img {
    width: 200px;
    height: 200px;
  }
}

::v-deep .van-loading {
  position: fixed;
  top: 7%;
  z-index: 100;
  background-color: #333333;
  width: 100%;
  height: 213px;
  line-height: 213px;
  text-align: center;
}
</style>
